<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <!-- vue实例 -->
    <div id="app" class="body-style">
        <h2>您当前点击的是 : {{ msg }} </h2>
        <div class="box-flex" v-for="item in list" :key="item.id">
            <my-cpn :listdata="item" @changeid="changeIdData"></my-cpn>
        </div>
        <!-- <div class="box-flex">
            <my-cpn :listdata="list[1]"></my-cpn>
        </div>
        <div class="box-flex">
            <my-cpn :listdata="list[2]"></my-cpn>
        </div>
        <div class="box-flex">
            <my-cpn :listdata="list[3]"></my-cpn>
        </div> -->
    </div>
    <!-- vue实例 -->

    <!-- 组件 -->
    <template id="myCpn">
        <div class="cpn-style" @click="clickCpn">
            <div class="cpn-img">
                <img :src="listdata.imgUrl" alt="">
            </div>
            <div class="text">
                {{ listdata.text }}
            </div>
            <div class="pirce">
                {{ listdata.price | newPrice }}
            </div>
        </div>
    </template>
    <!-- 组件 -->

    <script src="./vue.js"></script>
    <script src="./dist/dd.js"></script>
    <script>
        const app = new Vue({
    el:'#app',
    data(){
        return {
            list:[
                {
                    id:1,
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第一个数组中的内容吧",
                    price:150
                },
                {
                    id:2,
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第二个数组中的内容吧",
                    price:120
                },
                {
                    id:3,
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第三个数组中的内容吧",
                    price:180
                },
                {
                    id:4,
                    imgUrl:"https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",
                    text:"我是第四个数组中的内容吧",
                    price:240
                },
            ],
            msg:null
        }
    },
    methods:{
        changeIdData(val){
            if(val === 1){
                this.msg = '第一个'
            }else if(val === 2){
                this.msg = '第二个'
            }else if(val === 3){
                this.msg = '第三个'
            }else{
                this.msg = '第四个'
            }
        }
    },
    components:{
        'my-cpn':{
            template:'#myCpn',
            props:['listdata'],
            data(){
                return {

                }
            },
            methods:{
                clickCpn(){
                    this.$emit('changeid',this.listdata.id)
                }
            },
            filters:{
                newPrice(val){
                    return '¥' + val.toFixed(2)
                }
            }
        }
    }
})
    </script>
</body>
</html>